<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 左侧菜单 -->
      <div class="menus-wrapper">
        <!-- 菜单主体 -->
        <menusItem @acceptCity="acceptCity" />
        <!-- 推荐城市 -->
        <div class="aside-recommend">
          <h4>推荐城市</h4>
          <a href="#">
            <img
              src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3009110467,2075013449&fm=26&gp=0.jpg"
              alt
            />
          </a>
        </div>
      </div>
      <!-- 文章列表 -->
      <div class="post-wrapper">
        <searchWrapper @searchCity="postData" ref="searchWrapperRef" />
        <div class="post-header">
          <span class="post-title"
            ><i class="iconfont">&#xe60c;</i>推荐攻略</span
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            class="writeBtn"
            @click.native="$router.push('/post/writeTravel')"
            >写游记</el-button
          >
        </div>
        <postItem :postsdata="post" v-for="post in postsData" :key="post.id" />
        <el-pagination
          background
          layout="total,prev, pager, next,sizes,jumper"
          :page-size="pageSize"
          :page-sizes="[2, 5, 10]"
          @size-change="changeSize"
          @current-change="changeCurrent"
          :current-page="pageIndex"
          :total="total"
          class="pagination"
        ></el-pagination>
      </div>
    </el-row>
  </section>
</template>

<script>
import menusItem from "@/components/post/menusItem";
import postItem from "@/components/post/postItem";
import searchWrapper from "@/components/post/searchWrapper";
export default {
  components: {
    menusItem,
    postItem,
    searchWrapper
  },
  data() {
    return {
      postsData: [],
      total: null,
      pageSize: 5,
      pageIndex: 1,
      data: ""
    };
  },
  computed: {
    /* postsList() {
      if (!this.postsData) {
        return [];
      }
      const start = (this.pageIndex - 1) * this.pageSize;
      const end = start + this.pageSize;
      // console.log(this.postsData.slice(start, end));
      return this.postsData.slice(start, end);
    } */
  },
  mounted() {
    this.getPostList(this.data);
  },
  methods: {
    getPostList(data, search = 0) {
      if (search) {
        this.pageIndex = 1;
      }
      var obj = {
        _start: (this.pageIndex - 1) * this.pageSize,
        _limit: this.pageSize
      };
      if (data) {
        obj.city = data;
      }
      this.$axios({
        url: "/posts",
        params: obj
      }).then(res => {
        console.log("文章列表", res.data);
        this.total = res.data.total;
        this.postsData = res.data.data;
        // console.log("文章列表", this.postsData);
      });
    },
    //接收搜索子组件传递的值，并赋给文章列表
    postData({ city, search }) {
      this.data = city;
      // console.log("接收搜索到的值", data);
      this.getPostList(city, search);
    },
    //改变数量
    changeSize(size) {
      console.log(size);
      this.pageSize = size;
      this.getPostList(this.data);
    },
    //切换页码
    changeCurrent(index) {
      this.pageIndex = index;
      this.getPostList(this.data);
      console.log(index);
    },
    //接收侧边菜单栏传递的城市名称
    acceptCity(cityName) {
      console.log("城市名称", cityName);
      this.$refs.searchWrapperRef.clickSearch(cityName);
    }
  }
};
</script>

<style lang="less" scoped>
.contianer {
  width: 1000px;
  margin: 20px auto;
  .menus-wrapper {
    width: 260px;
  }
  .post-wrapper {
    width: 700px;
    .post-header {
      padding: 0 5px;
      line-height: 50px;
      height: 50px;
      border-bottom: 1px solid #ccc;
      .post-title {
        .iconfont {
          color: rgb(252, 227, 0);
          margin-right: 5px;
          font-size: 24px;
        }
        float: left;
        font-size: 20px;
        font-weight: 600;
        color: orange;
      }
      .writeBtn {
        float: right;
      }
    }
    .pagination {
      margin: 20px 0;
    }
  }
  .aside-recommend {
    margin-top: 20px;
    h4 {
      color: orange;
      padding-bottom: 6px;
      margin-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    a {
      img {
        width: 100%;
      }
    }
  }
}
</style>
